<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>确认订单</title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../../css/mui.min.css" />
	<link href="../../../../css/common.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="./css/index.css" />

</head>

<body>
	<div class="mui-content">
		<!-- 地址 -->
		<div class="address">
			<img src="../../../../images/cart/icon_order_location.png" class="order_location">
			<div class="info">
				<div class="user-info">
					<span class="username">张三</span>
					<span class="userphone">185461312121</span>
				</div>
				<div class="user-address">
					<span>河南省</span>&nbsp<span>郑州市</span>&nbsp<span>金水区</span>&nbsp<span>黄河路1号璞丽中心B座701室</span>
				</div>
			</div>
			<img src="../../../../images/home/icon_common_arrow_right.png" class="arrow_right">
		</div>
		<!-- 线条 -->
		<img src="../../../../images/cart/icon_order_ribbon.png" class="order_ribbon">
		<!-- 订单 -->
		<div class="cart-list">
			<div class="cart-list-item">
				<div class="recommend-list-item">
					<img src="../../../../images/home/demo.jpg" class="recommend-img">
					<div class="recommend-info">
						<div class="goods-info">
							<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL 今日下单即赠新品...</span>
							<span class="goods-code">编号:1234</span>
						</div>

						<div class="goods-last">
							<span class="goods-price">￥<span class="fuhao">69.80</span></span>
							<span class="goods-num">x<span class="num">2</span></span>
							<span class="goods-total-price">小计:￥<span class="total-price">100.00</span></span>
						</div>

					</div>
				</div>
			</div>
			<div class="cart-list-item">
				<div class="recommend-list-item">
					<img src="../../../../images/home/demo.jpg" class="recommend-img">
					<div class="recommend-info">
						<div class="goods-info">
							<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿</span>
							<span class="goods-code">编号:1234</span>
						</div>

						<div class="goods-last">
							<span class="goods-price">￥<span class="fuhao">69.80</span></span>
							<span class="goods-num">x<span class="num">5</span></span>
							<span class="goods-total-price">小计:￥<span class="total-price">500.00</span></span>
						</div>

					</div>
				</div>
			</div>
		</div>
		<!-- 优惠券 积分 运费 -->
		<div class="quan-content">
			<!--优惠券  -->
			<div class="quan-item border" id="youhuiqun">
				<div class="quan-item-left">
					<span class="list-name">订单优惠</span>
				</div>
				<div class="quan-item-right">
					<!-- 无优惠券展示 -->
					<!-- <span class="no-quan">暂无可用</span> -->
					<!-- 使用优惠券展示 -->
					<span class="has-quan">已使用优惠券 <span class="youhui">-￥<span
								class="quan-num">20.00</span></span></span>
					<img src="../../../../images/home/icon_common_arrow_right.png" class="arrow_right">
				</div>
			</div>
			<!-- 积分 -->
			<div class="quan-item" style="padding-top: 0.9375rem;">
				<div class="quan-item-left">
					<span class="list-name">积分抵扣</span>
					<span class="no-data">(暂无积分)</span>
					<!-- 如有积分展示 -->
					<!-- <span class="jifen">(当前账户积分:<span class="my-jifen">500</span>)</span> -->
				</div>
				<div class="quan-item-right" style="padding-right:1.25rem;">
					<span class="no-quan">无抵扣</span>
					<!-- 有抵扣展示 -->
					<!-- <span class="has-dikou">-￥<span class="dikou">5.00</span></span> -->
				</div>
			</div>
			<!-- 运费 -->
			<div class="quan-item" style="padding-top: 0.9375rem;">
				<div class="quan-item-left">
					<span class="list-name">运费</span>
					<span class="no-data">(全场满99元包邮)</span>
				</div>
				<div class="quan-item-right" style="padding-right:1.25rem;">
					<span class="no-yunfei">免运费</span>
					<!-- 有运费展示 -->
					<!-- <span class="has-yunfei">+￥<span class="yunfei">10.00</span></span> -->
				</div>
			</div>
		</div>
	</div>
	<!-- 提交订单 -->
	<div class="send-order">
		<div class="order-total-price">
			合计：<span class="my-total-price">￥<span class="my-total-price-num">1024.00</span></span>
		</div>
		<div id="send-order" class="order-btn">
			提交订单
		</div>
	</div>
	<!-- 弹框 -->
	<!-- 弹出层 -->
	<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
		<div class="coupons-content">
			<div class="edit-area">
				<span class="cancel">取消</span>
				<span class="text">选择优惠券</span>
				<span class="makesure">确认</span>
			</div>
			<div class="coupons-list">
				<div class="coupons-list-item">
					<div class="list-item-left">
						<span>￥<span class="coupons-num">20</span>
					</div>
					<div class="list-item-right no-select-bg">
						<span class="coupons-edu">满<span class="coupons-edu-num">50</span>元可用</span>
						<!-- 无门槛展示 -->
						<!-- <span class="no-coupons-edu">无门槛</span> -->
						<span class="coupons-erea">指定商品：<span class="goods-name">韩束KANS补水保湿面膜 10片装</span></span>
						<!-- 全场通用展示 -->
						<!-- <span class="no-coupons-erea">全场通用</span> -->
						<span class="coupons-time">有效期至<span class="time">2021-12-31 23:59:59</span></span>
					</div>
				</div>
				<div class="coupons-list-item">
					<div class="list-item-left">
						<span>￥<span class="coupons-num">20</span>
					</div>
					<div class="list-item-right no-select-bg">
						<!-- <span class="coupons-edu">满<span class="coupons-edu-num">50</span>元可用</span> -->
						<!-- 无门槛展示 -->
						<span class="no-coupons-edu">无门槛</span>
						<!-- <span class="coupons-erea">指定商品：<span class="goods-name">韩束KANS补水保湿面膜 10片装</span></span> -->
						<!-- 全场通用展示 -->
						<span class="no-coupons-erea">全场通用</span>
						<span class="coupons-time">有效期至<span class="time">2021-12-31 23:59:59</span></span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../../../../js/mui.min.js"></script>
	<script src="../../../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../../js/resize.js"></script>
	<script type="text/javascript">
		mui.init()
		$(function ($) {
			// 文档一加载就执行
			$(document).ready(function () {
				obj.setRem()
			})
			// 窗口调节
			$(window).resize(function () {
				obj.setRem()
			});
			// 优惠券弹出
			$('#youhuiqun').click(function () {
				// 优惠券弹框
				mui('#sheet').popover('show');

			})
			// 选择优惠券
			$('.coupons-list-item').on('click', '.no-select-bg', function () {
				$(this).attr('class', 'list-item-right select-bg')
			})
			// 取消选择
			$('.coupons-list-item').on('click', '.select-bg', function () {
				$(this).attr('class', 'list-item-right no-select-bg')
			})
			// 弹框关闭
			function popClose() {
				mui('#sheet').popover('hide');
			}
			// 点击取消 
			$('.cancel').click(function () {
				popClose();
			})
			// 点击确认
			$('.makesure').click(function () {
				popClose();
			})
			// 提交订单
			$('.send-order').click(function(){
				window.location.href='../pay/index.html';
			})
		});
	</script>
</body>

</html>